<template>
  <div class="video-component">
    <!--    1,4,9,16分屏-->
    <div class="normal" v-show="splitNum!==6">
      <el-row v-for="row in rowNum" :key="row" :style="{height: 100/colNum+'%'}" class="video-row">
        <el-col v-for="col in colNum" :key="col" class="video-col" :span="24/colNum">
          <GlVideo :ref="`video${(row-1)*colNum+(col-1)}`"
                   :selected="index===(row-1)*colNum+(col-1)"
                   :src="videoData[(row-1)*colNum+(col-1)]"
                   @click.native.capture="videoClick((row-1)*colNum+(col-1))">
          </GlVideo>
        </el-col>
      </el-row>
    </div>
    <!--    6分屏-->
    <div class="not-normal" v-show="splitNum===6">
      <el-row style="height: 66.66%" class="video-row">
        <el-col :span="16" class="video-col">
          <GlVideo ref="`video0`"
                   :selected="index===0"
                   :src="videoData[0]"
                   @click.native.capture="videoClick(0)">
          </GlVideo>
        </el-col>
        <el-col :span="8" class="video-col">
          <el-row v-for="count in 2" :key="count" class="video-row" style="height: 50%">
            <el-col :span="24" style="height: 100%">
              <GlVideo :ref="`video${count}`"
                       :selected="index===count"
                       :src="videoData[count]"
                       @click.native.capture="videoClick(count)">
              </GlVideo>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="height: 33.33%" class="video-row">
        <el-col v-for="count in 3" :key="count" :span="8" class="video-col">
          <GlVideo :ref="`video${(count+2)}`"
                   :selected="index===(count+2)"
                   :src="videoData[(count+2)]"
                   @click.native.capture="videoClick((count+2))">
          </GlVideo>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import GlVideo from "./glVideo/GlVideo";

export default {
  name: "VideoComponent",
  components: {GlVideo},
  props: {
    videoData: {//监控视频数据
      type: Array,
      defaultValue: []
    },
    splitNum: {//分屏数量
      type: Number,
      defaultValue: 4
    }
  },
  watch: {
    splitNum() {//分屏数量变化时改变index属性
      this.index = 0
    }
  },
  data() {
    return {
      index: 0//当前选中的视频
    }
  },
  computed: {
    //根据分屏计算行数
    rowNum() {
      switch (this.splitNum) {
        case 1:
          return 1
        case 4:
          return 2
        case 9:
          return 3
        case 16:
          return 4
        default:
          return 2
      }
    },
    //根据分屏计算列数
    colNum() {
      switch (this.splitNum) {
        case 1:
          return 1
        case 4:
          return 2
        case 9:
          return 3
        case 16:
          return 4
        default:
          return 2
      }
    }
  },
  methods: {
    //视频点击事件
    videoClick(index) {
      console.log(index)
      this.index = index
    }
  }
}
</script>

<style lang="scss" scoped>
.video-component {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;

  .normal, .not-normal {
    width: 100%;
    height: 100%;
  }

  .video-row {
    width: 100%
  }

  .video-col {
    height: 100%;
  }
}
</style>
